<!-- 机台效益分布图 -->
<template>
  <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'DistributionChart',
  setup() {
    const chart = ref<HTMLElement | null>(null);
    let myChart: echarts.ECharts | null = null;

    const initChart = () => {
      if (chart.value) {
        myChart = echarts.init(chart.value);

        const option: echarts.EChartsOption = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '机台效率',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '效率优秀' },
                { value: 735, name: '效率良好' },
                { value: 580, name: '效率一般' },
                { value: 484, name: '未开机' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        myChart.setOption(option);
      }
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      if (myChart) {
        myChart.dispose();
      }
    });

    return {
      chart,
    };
  },
});
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>